<template>
  <V-CommonHeaderLeft>
    <div class="inventory">
      <Navigation :msg="navMsg"></Navigation>
      <div class="stock-table"
           :style="{height: tableHeight}">
        <div class="datum">
          <ul>
            <li>
              <p>总库存量</p>
              <p>
                <span class="num">-364191</span>
              </p>
            </li>
            <li>
              <p>总库存金额</p>
              <p>
                <span class="num">￥52,580.00</span>
              </p>
            </li>
          </ul>
        </div>
        <div class="graph-box">
          <el-table ref="multipleTable"
                    :data="stock"
                    style="width: 100%;"
                    class="table-class">
            <el-table-column prop="goods"
                             label="商品名称/商品编号"
                             min-width="30%"
                             sortable>
              <template slot-scope="scope">
                <span :title="scope.row.goods">{{ scope.row.goods }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="size"
                             min-width="15%"
                             label="规格名称/规格编号">
              <template slot-scope="scope">
                <span :title="scope.row.goods">{{ scope.row.goods }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="belong"
                             min-width="10.5%"
                             label="所属仓库">
              <template slot-scope="scope">
                <span :title="scope.row.goods">{{ scope.row.goods }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="unit"
                             min-width="6.4%"
                             label="单位">
              <template slot-scope="scope">
                <span>{{ scope.row.a }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="systemStock"
                             min-width="13%"
                             label="系统库存"
                             sortable>
              <template slot-scope="scope">
                <span>{{ scope.row.x }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="lastPrice"
                             min-width="15.25%"
                             label="最后一次采购价">
              <template slot-scope="scope">
                <span>{{ scope.row.a }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="securityStock"
                             min-width="10%"
                             label="安全库存">
              <template slot-scope="scope">
                <span>{{ scope.row.s }}</span>
                <div class="hover-box">
                  <router-link to="#">成本调整明细</router-link>
                  <router-link to="#">库存详情</router-link>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <Paging :msg="pageMsg.length"
              ref="fn"
              @pageNum="getPageNum"
              @pageId="getPageId"></Paging>
    </div>
  </V-CommonHeaderLeft>
</template>
<script>
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import Navigation from '@/components/common/navigation/Navigation'
import Paging from '@/components/common/paging/Paging'
export default {
  data () {
    return {
      tableHeight: '',
      pageNum: 15, // 每页默认显示15条,
      pageId: 1, // 页面id
      navMsg: [
        {
          name: '仓库',
          path: '/outStock'
        },
        {
          name: '库存成本',
          path: ''
        }
      ],
      stock: [],
      pageMsg: [
        {
          goods: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装/99032'
        },
        {
          goods: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装/99032'
        },
        {
          goods: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装/99032'
        },
        {
          goods: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装/99032'
        },
        {
          goods: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装/99032'
        },
        {
          goods: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装/99032'
        },
        {
          goods: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装/99032'
        },
        {
          goods: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装/99032'
        }
      ]
    }
  },
  created () {
    this.stock = this.pageMsg
    this.getHight()
    window.addEventListener('resize', this.getHight)
  },
  destroyed () {
    window.removeEventListener('resize', this.getHight)
  },
  methods: {
    getHight () {
      this.tableHeight = window.innerHeight - 160 + 'px'
    },
    getPageId (id = 1) {
      this.pageId = id
      this.stock = this.$refs.fn.sliceArray(this.pageMsg, this.pageNum, id - 1)
    },
    getPageNum (num) {
      this.pageNum = num
      this.getPageId()
    }
  },
  components: {
    Navigation,
    Paging,
    VCommonHeaderLeft
  }
}
</script>
<style lang="scss" scoped>
.inventory {
  width: 100%;
  overflow: hidden;
  margin-right: 10px;
  background-color: #fff;
  .stock-table {
    width: 100%;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: hidden;
    &:hover {
      overflow-y: overlay;
    }
    &::-webkit-scrollbar {
      width: 8px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: rgba(0, 0, 0, 0.2);
    }
    &::-webkit-scrollbar-track {
      border-radius: 0;
      background-color: rgba(0, 0, 0, 0.1);
    }
    .datum {
      ul {
        display: flex;
        border: {
          top: 1px solid #e3e3e3;
          bottom: 1px solid #e3e3e3;
        }
        li {
          flex: 1;
          height: 100px;
          text-align: center;
          line-height: 50px;
          border-right: 1px solid #e3e3e3;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          p {
            font-size: 12px;
            color: #666;
            line-height: 2;
            .num {
              font-size: 18px;
              line-height: 2;
              font-weight: 600;
              margin-right: 2px;
            }
          }
        }
      }
    }
  }
  @mixin over-ellipsis {
    width: 100%;
    line-height: 20px;
    display: -webkit-box;
    overflow: hidden;
    white-space: normal !important;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  /deep/ .table-class {
    font-size: 12px;
    tr {
      position: relative;
      &:hover {
        .hover-box {
          display: flex;
        }
      }
      td {
        padding: 0;
        height: 40px;
        line-height: 40px;
        span {
          @include over-ellipsis;
        }
        .hover-box {
          display: none;
          position: absolute;
          top: 0;
          right: 0;
          height: 100%;
          border: 0 none;
          background-color: #a3bbd4;
          box-shadow: none;
          align-items: center;
          text-align: center;
          cursor: pointer;
          white-space: normal;
          word-break: normal;
          padding: 0 12px;
          z-index: 2;
          a {
            display: flex;
            width: 80px;
            padding: 0 12px;
            color: #ffffff;
            height: 100%;
            justify-content: center;
            align-items: center;
            font-size: 12px;
          }
        }
      }
      th {
        padding: 0;
        color: #333;
        height: 50px;
        line-height: 50px;
        font-weight: normal;
        background-color: #fcfcfc;
        .cell {
          @include over-ellipsis;
        }
      }
    }
  }
}
</style>
